.tabContainer {
  display: flex;
}

.tab {
  position: relative;
  padding: 8px;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: bold;
  outline: none;

  color: #878c9a; //TODO
  transition: color 300ms ease-in-out;
  &:hover {
    color: var(--text-highlight);
  }

  &.disabled {
    color: var(--text-muted);
  }

  &.active {
    color: var(--text-highlight);

    &:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;

      background-color: var(--base-color);
      height: 3px;
      border-radius: 2px;

      transition: background-color 300ms, height 300ms;
    }
  }
}
